<template>
    <div class="config-mode">
         <div class="config-layout">
            <!-- Left: Algorithm Selection -->
            <div class="algo-selection">
                <h3>1. 选择分析算法</h3>
                <div class="algo-list">
                    <div 
                        v-for="plugin in allPlugins" 
                        :key="plugin.id" 
                        class="algo-checkbox"
                        :class="{ selected: selectedAlgorithms.includes(plugin.id) }"
                        @click="toggleAlgorithm(plugin.id)"
                    >
                        <input type="checkbox" :checked="selectedAlgorithms.includes(plugin.id)" readonly />
                        <div class="algo-info">
                            <span class="name">{{ plugin.name }}</span>
                            <span class="desc">{{ plugin.description }}</span>
                        </div>
                        <button class="btn-config" @click.stop="openConfig(plugin)">⚙️ 参数</button>
                    </div>
                </div>
                <div class="action-bar">
                    <button class="btn-start" @click="$emit('run')" :disabled="analyzing || selectedAlgorithms.length === 0">
                        {{ analyzing ? '正在分析...' : '开始执行分析' }}
                    </button>
                </div>
            </div>

            <!-- Right: Config Panel -->
            <div class="algo-config-panel-wrapper">
                 <h3>2. 参数配置</h3>
                 <AlgorithmConfigPanel 
                    v-if="currentConfigPlugin"
                    :algorithm-name="currentConfigPlugin.name"
                    :params-schema="currentConfigPlugin.params || []"
                    :model-value="currentParams[currentConfigPlugin.id]"
                    @update:model-value="(val) => $emit('update-single-param', currentConfigPlugin.id, val)"
                 />
                 <div v-else class="empty-panel">
                    请点击左侧算法的 ⚙️ 图标进行配置
                 </div>
            </div>
         </div>
      </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import AlgorithmConfigPanel from '../components/AlgorithmConfigPanel.vue'

const props = defineProps({
    allPlugins: { type: Array, default: () => [] },
    selectedAlgorithms: { type: Array, default: () => [] },
    analyzing: { type: Boolean, default: false },
    currentParams: { type: Object, default: () => ({}) }
})

const emit = defineEmits(['update:selectedAlgorithms', 'run', 'update-single-param'])

const currentConfigPluginId = ref(null)

const currentConfigPlugin = computed(() => props.allPlugins.find(p => p.id === currentConfigPluginId.value))

const toggleAlgorithm = (id) => {
    // Clone prop array to modify
    const newSelection = [...props.selectedAlgorithms]
    const idx = newSelection.indexOf(id)
    if (idx > -1) {
        newSelection.splice(idx, 1)
        if (currentConfigPluginId.value === id) currentConfigPluginId.value = null
    } else {
        newSelection.push(id)
        currentConfigPluginId.value = id // Auto select config
    }
    emit('update:selectedAlgorithms', newSelection)
}

const openConfig = (plugin) => {
    if (!props.selectedAlgorithms.includes(plugin.id)) {
        emit('update:selectedAlgorithms', [...props.selectedAlgorithms, plugin.id])
    }
    currentConfigPluginId.value = plugin.id
}
</script>

<style scoped>
/* Config Mode */
.config-mode {
    flex: 1;
    padding: 20px;
    overflow: hidden;
}

.config-layout {
    display: flex;
    height: 100%;
    gap: 20px;
}

.algo-selection {
    flex: 2;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.algo-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 15px;
}

.algo-checkbox {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #ebeef5;
    margin-bottom: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.algo-checkbox:hover { border-color: #c6e2ff; }
.algo-checkbox.selected { border-color: #409eff; background: #ecf5ff; }

.algo-checkbox input { margin-right: 15px; transform: scale(1.2); }
.algo-info { flex: 1; display: flex; flex-direction: column; }
.algo-info .name { font-weight: bold; font-size: 15px; color: #303133; }
.algo-info .desc { font-size: 13px; color: #909399; margin-top: 4px; }

.btn-config {
    padding: 4px 10px;
    font-size: 12px;
    background: white;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
}
.btn-config:hover { color: #409eff; border-color: #c6e2ff; }

.action-bar {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

.btn-start {
    background: linear-gradient(135deg, #409eff, #3a8ee6);
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(64,158,255,0.3);
}

.algo-config-panel-wrapper {
    flex: 1;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.empty-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909399;
}
</style>
